const { resolve ,join} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');//处理html资源
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');//对css进行优化
const MiniCssExtractPlugin = require('mini-css-extract-plugin');//处理css资源
const PurgecssPlugin = require('purgecss-webpack-plugin');//处理css无用是代码
const glob=require('glob');
const PATHS={src:join(__dirname,'src')};
 // 还需要在package.json中定义browserslist   进行浏览器兼容设置
const commonCssLoader = [//从右到左
  MiniCssExtractPlugin.loader,//提取成一个新文件加载
  'css-loader',//打包css
  'postcss-loader'//CSS进行浏览器兼容处理
];

module.exports = {
  //  entry: ['./src/js/main.js','./src/index.html'], 热替换 只更新html
    entry: './src/js/main.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')//__dirnamed当前目录的意思 ，在当前目录创建build文件
  },
  module: {
    rules: [
      {
        test: /\.css$/,
       //开发环境中使用 热替换 use: ['style-loader', 'css-loader','postcss-loader']
        use: [...commonCssLoader]
      },
      {
        test: /\.less$/,
        use: [...commonCssLoader, 'less-loader']
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader','less-loader','sass-loder']
      },

      {
        test: /\.(jpg|png|gif)/,
        loader: 'url-loader',
        options: {//对图片进行优化
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          outputPath: 'imgs',
          esModule: false
        }
      },
      {
        test: /\.js$/,
         exclude:/node_modules/,
         loader:'eslint-loader' ,//对js语法进行检查 修复
         options:{
          fix:true
        }
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
        options:{
          esModule: false
        }
      },
      {
        exclude: /\.(js|css|less|html|jpg|png|gif)/, //进行排除 
        loader: 'file-loader',
        options: {
          outputPath: 'media'
        }
      }
    ]

  },
  
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'built.css'//生成一个新的css压缩文件
    }),
    new OptimizeCssAssetsWebpackPlugin(),

    new PurgecsPlugin({
 paths:glob.sync('${PATHS.src}/**/*',{nodir:true}),
      }),
    new HtmlWebpackPlugin({
      template: './index.html',//按index模板进行压碎
      //filename可是设置压缩的名字,
      //chunks：[]  可以设置需要加载
      minify: {//对html进行压缩   
        collapseWhitespace: true,//移除空格
        removeComments: true  //移除注释
      }
    })
  ],
  mode: 'development',
  target:'web',
  // 开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器~~）
  // 特点：只会在内存中编译打包，不会有任何输出
  // 启动devServer指令为：npx webpack-dev-server
  devServer: {
    // 项目构建后路径
    contentBase: resolve(__dirname, 'build'),
    // 启动gzip压缩
    compress: true,
    // 端口号
    port: 3000,
    // 自动打开浏览器
    open: true,
    hot:true//模块热替换  哪个模块改动就更新那个模块 不用完全更新
  }
};